// 添加房子页面
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Field, NavBar, Button, Uploader, Toast } from 'react-vant'
import s from './style.module.less'
import { useStore, observer } from '@/store'

const AddMyHouse = () => {
  const [city, setCity] = useState('')
  const [community, setCommunity] = useState('')
  const [area, setArea] = useState('')
  const [type, setType] = useState('')
  const [forward, setForward] = useState('')
  const [floor, setFloor] = useState('')
  const [door, setDoor] = useState('')
  const { userStore } = useStore()
  const navigate = useNavigate()
  let house={
    city:'',
    community:'',
    area:'',
    type:'',
    forward:'',
    floor:'',
    door:''
  }

  const goToHome = () => {
    navigate(-1)
  }
  const showToast = async () => {
    await Toast.info({
      message: '添加成功',
      duration: 1000
    })
    setTimeout(() => {
      navigate(-1)
    }, 1000)
  }
  // 提交内容
  const commit = () => {
    house.city = city
    house.community = community
    house.area = area
    house.type = type
    house.forward = forward
    house.floor = floor
    house.door = door;
    userStore.houseArr.push(house)
    house={}
    showToast()
   console.log(userStore.houseArr);
  }
  useEffect(() => {
    console.log(city);
  }, [city])

  return (
    <div className={s.main}>
      <NavBar
        title="添加我的房屋"
        onClickLeft={() => goToHome()}
      />
      {/* 表单 */}
      <Field className={s.field}
        value={city}
        label='城市'
        placeholder='输入城市'
        onChange={setCity}
      />
      <Field className={s.field}
        value={community}
        label='小区名称'
        placeholder='输入小区名称'
        onChange={setCommunity}
      />
      <Field className={s.field}
        value={area}
        label='面积'
        placeholder='输入面积'
        onChange={setArea}
      />
      <Field className={s.field}
        value={type}
        label='户型'
        placeholder='输入户型'
        onChange={setType}
      />
      <Field className={s.field}
        value={forward}
        label='朝向'
        placeholder='输入朝向'
        onChange={setForward}
      />
      <Field className={s.field}
        value={floor}
        label='楼层'
        placeholder='输入楼层'
        onChange={setFloor}
      />
      <Field className={s.field}
        value={door}
        label='楼栋门牌'
        placeholder='输入楼栋门牌'
        onChange={setDoor}
      />
      <div className={s.updateAva}>
        <div className={s.ava}>上传照片</div>
        <Uploader
          multiple
          maxCount={6}

        />
      </div>
      <Button type='primary' className={s.button} onClick={() => commit()}>
        点击添加
      </Button>
    </div>
  )
}

export default observer(AddMyHouse)
